{% extends 'base.html' %}
{% block css-content %}
    <link rel="stylesheet" href="/static/css/bootstrap-select.css">
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet"> 
    <link href="/static/css/doublebox-bootstrap.css" rel="stylesheet"> 
    <link href="/static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="/static/tooltips/css/tooltips.css"> 
    <link href="/static/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> 
    <link href="/static/switchery/dist/css/bootstrap-switch.min.css" rel="stylesheet">        
{% endblock %}
{% block page-content %}
    <div class="clearfix"></div>             

        <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2><i class="fa fa-bars"></i> 应用中心<small>Application Center</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">


                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                      <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-map-marker"></i> 应用列表</a>
                        </li>
                         <li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false"><i class="fa fa-tasks"></i> 应用管理</a>
                        </li>                     
                      </ul>
                      <div id="myTabContent" class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">			              
			              <div class="col-md-12 col-sm-12 col-xs-12">

					            <div class="page-title">
					              <div class="title_left">
							       <ul class="pagination pagination-split">
							        <li><a href="#">A</a></li>
							        <li><a href="#">B</a></li>
							        <li><a href="#">C</a></li>
							        <li><a href="#">D</a></li>
							        <li><a href="#">E</a></li>
							        <li>...</li>
							        <li><a href="#">W</a></li>
							        <li><a href="#">X</a></li>
							        <li><a href="#">Y</a></li>
							        <li><a href="#">Z</a></li>
							      </ul>
					              </div>
			
					              <div class="title_right">
					                <div class="col-md-5 col-sm-5  form-group pull-right top_search">
					                  <div class="input-group">
					                    <input type="text" class="form-control" placeholder="Search for...">
					                    <span class="input-group-btn">
					                      <button class="btn btn-default" type="button">Go!</button>
					                    </span>
					                  </div>
					                </div>
					              </div>
			            		</div>

					            <div class="row">
					                <div class="x_panel">
					                  <div class="x_content" id="apply_config_content">
					                      <div class="col-md-12 col-sm-12  text-center">
					                      </div>
					
					                      <div class="clearfix"></div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>MySQL</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>MySQL </strong>是一个小型的开源的关系型数据库管理系统，与其他大型数据库管理系统例如Oracle、DB2、SQL Server等相比，MySQL规模小，功能有限，但是它体积小、速度快、成本低，且它提供的功能对稍微复杂的应用已经够用，这些特性使得MySQL成为世界上最受欢迎的开放源代码数据库。</p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/mysql.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-primary btn-sm" type="button"><i class="fa fa-edit"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					                      
					                      
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>MongoDB</i></h4>
					                            <div class="left col-md-7 col-sm-7">				                              
					                              <p><strong>MongoDB</strong>是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。</p>
					                              <p>MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。</p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/mongodb.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Kafka</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <h2>Nicole Pearson</h2>
					                              <p><strong>Kafka </strong> 
					                              Kafka是最初由Linkedin公司开发，是一个分布式、分区的、多副本的、多订阅者，基于zookeeper协调的分布式日志系统（也可以当做MQ系统），常见可以用于web/nginx日志、访问日志，消息服务等等。
					                              </p>

					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/kafka.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Docker</i></h4>
					                            <div class="left col-md-7 col-sm-7">					                              
					                              <p><strong>Docker: </strong>
					                               	是一个用于开发，交付和运行应用程序的开放平台。Docker 使您能够将应用程序与基础架构分开，从而可以快速交付软件。
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/docker.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					                      
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Kubernetes</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>Kubernetes: </strong> 
		 	 	 	 	 	 	 	 	 	 	 	是一个可移植的、可扩展的开源平台，用于管理容器化的工作负载和服务，可促进声明式配置和自动化。					                              
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/kubernetes.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Redis</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>Redis: </strong>
					                              	是一个使用ANSI C编写的开源、支持网络、基于内存、分布式、可选持久性（英语：Durability_(database_systems)）的键值对存储数据库
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/redis.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>PostgreSQL</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>PostgreSQL: </strong> 
					                              	是一个免费的对象-关系数据库服务器(ORDBMS)
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/postgresql.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Prometheus</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>Prometheus: </strong> 
					                             	 是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的。
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/prometheus.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>	
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					
					                      <div class="col-md-4 col-sm-4  profile_details">
					                        <div class="well profile_view">
					                          <div class="col-sm-12">
					                            <h4 class="brief"><i>Elasticsearch</i></h4>
					                            <div class="left col-md-7 col-sm-7">
					                              <p><strong>Elasticsearch: </strong> 
					                              	是一个基于Lucene构建的开源、分布式、RESTful接口的全文搜索引擎。 Elasticsearch还是一个分布式文档数据库，其中每个字段均可被索引，而且每个字段的数据均可被搜索，ES能够横向扩展至数以百计的服务器存储以及处理PB级的数据。
					                              </p>
					                            </div>
					                            <div class="right col-md-5 col-sm-5 text-center">
					                              <img src="/static/images/elasticsearch.png" alt="" class="img-circle img-fluid">
					                            </div>
					                          </div>
					                          <div class=" profile-bottom text-center">
					                            <div class=" col-sm-6 emphasis">
					                              <p class="ratings">
					                                <a>4.0</a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star"></span></a>
					                                <a href="#"><span class="fa fa-star-o"></span></a>
					                              </p>
					                            </div>
					                            <div class=" col-sm-6 emphasis">
								                    <div class="btn-group">
								                      <button class="btn btn-secondary btn-success btn-sm" type="button"><i class="fa fa-play"></i></button>
								                      <button class="btn btn-secondary btn-danger btn-sm" type="button"><i class="fa fa-times"></i></button>
								                    </div>					                            
					                            </div>
					                          </div>
					                          <div class="col-sm-12"><p></p></div>
					                        </div>
					                      </div>
					                  </div>
					                </div>
					            </div>

			              </div>			              			              
                        </div>                        
                        <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                        
 			              <div class="col-md-8 col-sm-8 col-xs-8">

									<form role="form" method="post" id="apply_config_form" enctype="multipart/form-data">
										{% csrf_token %}
										<div class="item form-group">
		 									<label><font color='red'>* </font>名称<i class="fa fa-info-circle" data-toggle="tooltip" title="应用名称"></i></label>
											<input class="form-control" name="apply_name" id="apply_name" placeholder="最好使用英文表示" required>
										</div>
										<div class="item form-group">
		 									<label><font color='red'>* </font>类型<i class="fa fa-info-circle" data-toggle="tooltip" title="应用类型: 比如MySQL、Redis、MongoDB"></i></label>
											<input class="form-control" name="apply_type" id="apply_type" placeholder="最好使用英文表示" required>
										</div>																			
										<div class="item form-group">
		 									<label><font color='red'>* </font>描述<i class="fa fa-info-circle" data-toggle="tooltip" title="描述应用的作用"></i></label>
											<textarea class="form-control" rows="3" id="apply_desc" name="apply_desc" placeholder="描述一下应用的作用" required>

											</textarea>
										</div>									
										<div class="item form-group">
											<label><font color='red'>* </font>图标<i class="fa fa-info-circle" data-toggle="tooltip" title="应用图标展示"></i></label>
											<input type="file" class="file" id="apply_icon" name="apply_icon" data-msg-placeholder="请上传128*128像素的图片" data-show-upload="false" data-show-caption="true"  value="" required/>						
										</div>
										<div class="item form-group">
											<label><font color='red'>* </font>剧本路径<i class="fa fa-info-circle" data-toggle="tooltip" title="应用部署剧本路径"></i></label>
											<input class="form-control" name="apply_playbook" id="apply_playbook" placeholder="服务器上面剧本路径，并且请把hosts改成变量host"  required>					
										</div>										
										<div class="item form-group">
		 									<label>变量<i class="fa fa-info-circle" data-toggle="tooltip" title="剧本变量: json格式"></i></label>
											<textarea class="form-control" rows="10" id="apply_payload" name="apply_payload" placeholder="json格式" required>
											</textarea>		
										</div>			
										<legend></legend>																																
										<lable><button type="button" class="btn btn-default" id="applyCenterbtn" name="btn-apply-add" >创建</button></lable>
										<button type="reset" class="btn btn-default">撤销</button>
									</form>
			              </div>
                       
                        
						</div>                       
                        
                      </div>
                    </div>

                  </div>
                </div>
              </div>        
        </div>     

        <div id="addApplyTaskModal" class="modal fade bs-example-modal-zone" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">

              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="apply_h4"><i class="fa fa-play"></i> 执行应用部署 <i class="fa fa-spinner"></i></h4>
              </div>
              <div class="modal-body">
				<form class="form-horizontal" role="form" id="applytaskform">
							<div class="form-group" >			 		             
									<label class="col-sm-3 control-label"><font color="red">* </font>选择方式</label>
									<div class="col-sm-6">
										<select class="selectpicker form-control" name="server_model" id="server_model">
											<option value="" name="server_model" disabled selected="selected">选择一个类型</option>
											<option value="business" name="server_model">业务项目</option>
<!-- 											<option value="inventory_groups" name="server_model">主机组</option> -->
											<option value="group" name="server_model">使用部门</option>
											<option value="tags" name="server_model">资产标签</option>
											<option value="custom" name="server_model">自定义</option> 	
										</select>		
									</div>	
							</div>	
							<div id='project_server'  style="display:none;">
								<div class="form-group">
									 <label class="col-sm-3 control-label" >业务项目</label>
									 <div class="col-sm-6">
                                           <select class="selectpicker form-control" name="business"  id="deploy_business" onchange="javascript:oBtProjectSelect(this);" required>
                                           	<option name="project" value="" selected="selected">请选择一个项目</option>
                                           </select>
									 </div>
								</div>										
							</div>		
							<div id='inventory_server'  style="display:none;">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label" >动态资产组<i class="fa fa-info-circle" data-toggle="tooltip"  title="根据动态资产添加选择服务器"></i></label>
                                    <div class="col-sm-6">
	                                 <select class="selectpicker form-control" name="inventory" onchange="javascript:oBtInventorySelect(this);">
	                                 </select>
                              		</div>                            		
                                </div> 
								<div class="form-group">
									 <label class="col-sm-3 control-label" >主机组</label>
									 <div class="col-sm-6">
                                           <select class="selectpicker form-control" name="inventory_groups"   onchange="javascript:AssetsTypeSelect(this,'inventory_group');" required>
											<option name="inventory_groups" value="" disabled selected="selected">请选择一个主机组</option>
                                           </select>
									 </div>
								</div>                                  
                            </div>																				
							<div id="group_server" class="form-group" style="display:none;">
								 <label class="col-sm-3 control-label" >使用部门</label>
								 <div class="col-sm-6">
                                       <select class="selectpicker form-control" name="group"  onchange="javascript:AssetsTypeSelect(this,'group');" required> 
                                       </select>
								 </div>
							</div>	
							<div id="tags_server" class="form-group" style="display:none;">
								 <label class="col-sm-3 control-label" >资产标签</label>
								 <div class="col-sm-6">
                                       <select class="selectpicker form-control" name="tags"  onchange="javascript:AssetsTypeSelect(this,'tags');" required> 
                                       </select>
								 </div>
							</div>																																													
							<div class="form-group"  id="custom_server" style="display:none;">				
								<label class="col-sm-3 control-label" ><font color="red">* </font>自定义主机<i class="fa fa-info-circle" data-toggle="tooltip" title="输入要安装应用的主机"></i></label>
								<div class="col-sm-6">
									<textarea class="form-control" rows="5" id="add_task_apply_hosts" name="add_task_apply_hosts" required>{
   "hosts":[]
}</textarea>
								</div>
							</div>																		
							<div class="form-group">
								<label class="col-sm-3 control-label" ><font color="red">* </font>部署参数<i class="fa fa-info-circle" data-toggle="tooltip" title="剧本变量: json格式"></i></label>
								<div class="col-sm-6">
									<textarea class="form-control" rows="10" id="add_task_apply_payload"  name="apply_payload" required>
									</textarea>	
								</div>	
							</div>																										
				</form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="addApplyTaskSubmit"  class="btn btn-primary">添加</button>
              </div>

            </div>
          </div>
        </div>	   
                 
{% endblock %}
{% block js-content %}
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
    <script src="/static/js/doublebox/doublebox-bootstrap.js"></script>
    <script src="/static/switchery/dist/js/bootstrap-switch.min.js"></script>       
	<script src="/static/js/apply/center.js"></script> 
	<script src="/static/tooltips/js/jquery.pure.tooltips.js"></script>	  
	<script src="/static/fileinput/js/fileinput.js" type="text/javascript"></script> 
{% endblock %}